<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:insert="~{include :: header('新增课程专集')}" />
</head>
<body class="hold-transition">
<div class="container-fluid mt-2 mb-2">
    <form class="form-horizontal m" id="form-studentcard-add">
        <input type="hidden" name="courseIds" id="courseIdHidden"/>
        <div class="form-group row">
            <label class="col-sm-2 col-form-label text-sm-right">所属专集</label>
            <div class="col-sm-4">
                <select name="recommend" id="albumId" class="form-control m-b" th:with="type=${courseAlbum}" required>
                    <option th:each="dict : ${type}" th:text="${dict.name}" th:value="${dict.id}"></option>
                </select>
            </div>
        </div>
        <div class="form-group" id="limitCourse">
            <label class="col-sm-2 col-form-label text-sm-right">选择课程</label>
            <div class="col-sm-6" style="padding-top: 4px">
                <button type="button"  onclick="courseAdds()" class="btn btn-xs btn-success"><i class="fa fa-plus"></i> 添加课程</button>&nbsp;
                <button type="button"  onclick="courseRemove()" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i> 清空 </button>
                <div style="margin-top: 20px" id="courselist">
                </div>
            </div>
        </div>


    </form>
</div>
<div class="row">
    <label class="col-sm-2"></label>
                <div class="col-sm-10">
        <button type="button" class="btn btn-primary" onclick="submitHandler()"><i class="fa fa-check"></i>保 存</button>&nbsp;
        <button type="button" class="btn btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
    </div>
</div>
<th:block th:insert="~{include :: footer}" />
<script type="text/javascript">
    var prefix = "/recom";
    function submitHandler() {
            var courseIds = $("#courseIdHidden").val();
            var reId = $("#albumId").val();
            if(courseIds == "" || courseIds.length == 0){
                $.modal.msgError('请选择课程')
                return false;
            }
            var data = {"reId":reId,"courseIds":courseIds}
            $.operate.saveTab("/course/album/item/add", data);
    }

    //添加课程
    function courseAdds(){
        $.modal.open('选择课程', "/course/select.html", '1024', '580');
    }

    function courseList(courseArr){
        var courseId = "";
        var cardCourseName = "";
        if(courseArr.length > 0){
            $("#courselist").empty();
            for(var i=0;i<courseArr.length;i++){
                courseId += courseArr[i].courseId+",";
                var courseName = courseArr[i].courseName+",";
                cardCourseName += courseName;
                $("#courselist").append("<p style='color: #2d93ca'><i class='fa fa-tasks'></i> "+courseName+"</p>")
            }
            var reg=/,$/gi;
            courseId=courseId.replace(reg,"");
            cardCourseName = cardCourseName.replace(reg,"");
        }
        $("#courseIdHidden").val(courseId);
        $("#cardCourseName").val(cardCourseName);
    }

    function courseRemove() {
        $("#courselist").empty();
        $("#courseIdHidden").val("");
    }
</script>
</body>
</html>